<template>
    <div id="friendList">
        <Row>
            <Col class="search-bar">
                <Input prefix="md-search" v-model="keyword" @on-change="search" ></Input>
            </Col>
        </Row>
        <div class="panel">
            <CellGroup @on-click="click">
                <Cell v-for="(item, index) in currentData"
                      :key="index"
                      :name="index"
                      :selected="selectedCellName===index">
                    <Avatar shape="square" icon="md-person" solt="icon" />
                    <div class="nick-name">{{item.name}}</div>
                </Cell>
            </CellGroup>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'ChatFriendList',
        props: {
            data: Array
        },
        data () {
            return {
                selectedCellName: '',
                keyword: '',
                currentData: []
            };
        },
        methods: {
            click (name) {
                this.selectedCellName = name;
                this.$emit('on-select', this.currentData[name]);
            },
            search () {
                if (this.data && this.data.length > 0) {
                    let searchData = JSON.parse(JSON.stringify(this.data));
                    if (this.keyword) {
                        this.currentData = searchData.filter(item => {
                            let index = item.name.search(new RegExp(this.keyword, 'i'));
                            return index >= 0;
                        });
                    } else {
                        this.currentData = searchData;
                    }
                }
            }
        },
        watch: {
            data (val) {
                this.currentData = val;
            }
        }
    };
</script>

<style scoped>
    .search-bar {
        padding: 0 16px;
    }
    .panel {
        height: 520px;
        overflow-y: auto;
    }
    .nick-name {
        margin-top: 4px;
        padding-left: 8px;
        overflow: hidden;
        text-overflow:ellipsis;
        color: #fff;
        width: 220px;
        float: right;
    }
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        background-color: #c3c3c3;
    }
    ::-webkit-scrollbar-track {
        background-color: transparent;
    }
</style>

<style lang="less">
    #friendList {
        .ivu-cell-selected, .ivu-cell.ivu-cell-selected:hover {
            background: #3a3f45;
        }
        .ivu-cell:hover{
            background: #3a3f45;
        }
    }
</style>
